Godot: TextureProgressBar を使って HPバーを作る

https://gyazo.com/ccd0aef4c779c02848569f4931d6971c

今回は以下の仕様とする

受けたダメージの量だけ黄色で表示して、ゲージ増減アニメーションをつける

残り体力の割合で色を変える

まず、TextureProgressBar ノードを追加する

https://gyazo.com/09ac38eb84349f869d79e57542a3670d

今回は２つのTextureProgressBarを重ねるので、Over と Under の２つ作成する

Over が残量表示

Under がダメージ受けた時の差分アニメーション表示用

ヒエラルキー上では、Underを上にする。

Over の TextureProgressBar には、以下のテクスチャをセットする。

Under

セットしない

Over

https://gyazo.com/6cdd31d1630ab5235d776c62a08f7fe2

枠だけあって、中身は Transparent

Progress

https://gyazo.com/9d809a623724ca5e1fd78fb930f41be6

↑では見えないけど、白いゲージ。tint で色をつける

https://gyazo.com/4059e51e688a23a804b35ad8ab24b280

Under の TextureProgressBar には、以下のテクスチャをセットする。

Under

https://gyazo.com/36e6d4862cc3137e3ff4cc1483fbab2c

バックグラウンド用

Over

セットしない

Progress

https://gyazo.com/9d809a623724ca5e1fd78fb930f41be6

↑では見えないけど、白いゲージ。tint で色をつける

https://gyazo.com/9aacbebed02b972eb0b0c741617f641c

これで準備はOK

プレイヤーのHPダメージを受けた時などで、以下の処理を実行する

code:gd

func _change_hp_var() -> void:

var tween := create_tween()

tween.set_ease(Tween.EASE_IN).set_trans(Tween.TRANS_SINE)

tween.tween_property(%PlayerHpBarUnder, "value", hp * 100.0 / max_hp, 0.5)

%PlayerHpBarOver.value = hp * 100.0 / max_hp

if hp <= max_hp * 0.3:

%PlayerHpBarOver.tint_progress = Color.RED

elif hp <= max_hp * 0.6:

%PlayerHpBarOver.tint_progress = Color.SANDY_BROWN

else:

%PlayerHpBarOver.tint_progress = Color.GREEN

参考動画:

https://www.youtube.com/watch?v=YEZXVK1-tlU